import React, { ReactElement, useEffect, useState } from 'react'
import { Input, Button, Table, Space } from 'antd';
import { getHeroList } from '@/api/hero'
import { history } from 'umi'
import styles from '@/pages/index.less'
import styles2 from './list.less'

const { Search } = Input;

interface Props {

}

const columns = [
    {
        title: '序号',
        key: 'index',
        render: (row: any, item: any, index: number) => {
            return <span>
                {index + 1}
            </span>
        },
        align: "center"
    },
    { title: '英雄名称', dataIndex: 'name', key: 'name', align: "center" },
    { title: '英雄称号', dataIndex: 'title', key: 'title', align: "center" },
    {
        title: '所属分类',
        dataIndex: 'cate',
        key: 'cate',
        align: "center",
        render: (row: Array<string>) => {
            return <div>
                {
                    row.map((item: any, index: number) => {
                        return <span key={index}>
                            {item.name}
                            {
                                index >= row.length - 1 ? '' : ' / '
                            }
                        </span>
                    })
                }
            </div>
        }
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
        align: "center",
        render: (row: string) => {
            return <img style={{
                width: 50
            }} src={row} alt="" />
        }
    },
    {
        title: '操作',
        dataIndex: '',
        key: 'x',
        align: "center",
        render: () => <Space>
            <Button type="primary">编辑</Button>
            <Button type="primary" danger>删除</Button>
        </Space>
    },
];

export default function Index({ }: Props): ReactElement {
    const [data, setData] = useState([])
    const [pagination, setPagination] = useState({
        pageSize: 5,
        current: 1,
        total: 1,
        pageSizeOptions: [5, 8, 10, 15]
    })

    const onSearch = (value: string) => {
        getHeroList({
            pagenum: 1,
            pagesize: 5,
            query: value
        }).then(res => {
            const data = res.data.data
            data.forEach((item: any) => item.key = item._id)
            const pagination2 = JSON.parse(JSON.stringify(pagination))
            if (value !== '') {
                pagination2.total = 1
            } else {
                pagination2.total = res.data.total
            }
            
            setPagination(pagination2)
            setData(data)
        })
    };

    const handlerChange = (pagination: any) => {
        getHeroList({
            pagenum: pagination.current,
            pagesize: pagination.pageSize
        }).then(res => {
            const pagination2 = JSON.parse(JSON.stringify(pagination))
            const data = res.data.data
            data.forEach((item: any) => item.key = item._id)
            pagination2.total = res.data.total
            pagination2.current = pagination.current
            pagination2.pageSize = pagination.pageSize
            setPagination(pagination2)
            setData(data)
        })
    }

    const init = () => {
        getHeroList({
            pagenum: pagination.current,
            pagesize: pagination.pageSize
        }).then(res => {
            const pagination2 = JSON.parse(JSON.stringify(pagination))
            const data = res.data.data
            data.forEach((item: any) => item.key = item._id)
            pagination2.total = res.data.total
            setPagination(pagination2)
            setData(data)
            console.log(data)
        })
    }

    useEffect(() => {
        init()
    }, [])
    return (
        <div className={styles.warp}>
            <Search 
                style={{
                    width: 240
                }} 
                placeholder="请输入搜索内容"
                allowClear
                onSearch={onSearch} 
                enterButton />
            <Button style={{
                marginLeft: 30
            }} type="primary" onClick={() => {
                history.push('/hero/add')
            }}>+ 添加英雄</Button>

            <div style={{
                marginTop: 30
            }}>
                <Table
                    bordered
                    columns={columns}
                    pagination={pagination}
                    onChange={handlerChange}
                    expandable={{
                        expandedRowRender: record => {
                            return <div className={styles2.oul}>
                                {
                                    record.skills.map((item: any, index: number) => {
                                        return <dl key={index}>
                                            <dt>
                                                <img style={{
                                                    width: 50
                                                }} src={item.icon} alt="" />
                                            </dt>
                                            <dd>
                                                {item.name}
                                            </dd>
                                        </dl>
                                    })
                                }
                            </div>
                        },
                        rowExpandable: record => record.name !== 'Not Expandable',
                    }}
                    dataSource={data}
                />
            </div>
        </div>
    )
}
